<template>
    <div ref="chartRef" style="width: 600px; height: 400px"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useI18n } from 'vue-i18n'; 
//import myTheme from './js/theme'; // 引入自定义主题
const chartRef = ref<HTMLElement | null>(null);
//echarts.registerTheme('myTheme', myTheme);
const { t } = useI18n();
// 在组件挂载时初始化图表
onMounted(() => {
    initChart();
});
// 初始化图表
const initChart = () => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value);
        // 配置图表选项
        const option: echarts.EChartsOption = {
            title: {
                text: t("最近七天统计"),
                subtext: "",
                left: "center",
            },
            legend: {
                top: "bottom",
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: false, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            series: [
                {
                    name: "Nightingale Chart",
                    type: "pie",
                    radius: [20, 160],
                    center: ["50%", "50%"],
                    roseType: "area",
                    itemStyle: {
                        borderRadius: 8,
                    },
                    data: [
                        { value: 40, name: t("星期一") },
                        { value: 38, name: t("星期二") },
                        { value: 32, name: t("星期三") },
                        { value: 30, name: t("星期四") },
                        { value: 28, name: t("星期五") },
                        { value: 26, name: t("星期六") },
                        { value: 22, name: t("星期日") },
                    ],
                    label: {
                        show: true, // 显示标签
                        position: "outside", // 标签的位置，'outside' 为外部
                        formatter: "{c}({d}%)", // 格式化标签内容，显示名称、数值和百分比 {b}: {c} ({d}%)，{b} 表示名称，{c} 表示数值，{d} 表示百分比
                        fontSize: 14, // 字体大小
                        color: "#000", // 字体颜色
                    },
                },
            ],
        };
        // 设置图表的配置项和数据
        chart.setOption(option);
        // 监听窗口大小变化，自动调整图表大小
        window.addEventListener("resize", () => {
            chart.resize();
        });
    }
};
</script>

<style scoped>
/* 根据需要添加样式 */
</style>
